<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>
    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }
        /*密码强度*/
        .ywz_zhucexiaobo{float: left;width: 620px;padding-bottom: 10px;padding-top: 5px;}
        .ywz_zhuce_xiaoxiaobao{float: left;width: 226px;}
        .ywz_zhuce_kuangzi{float: left;width: 226px;height: 38px;color: #171717;}
        .ywz_zhuce_huixian{float: left;background: #d6d3d3;width: 72px;height: 6px;margin-top: 5px;_margin-top:0px;margin-left: 5px;_height:2px;font-size: 0px;border-radius: 5px;}
        #pwdLevel_1{margin-left: 0px;}
        .ywz_zhuce_hongxian{background: #E93807;}
        .ywz_zhuce_hongxian2{background: #F58018;}
        .ywz_zhuce_hongxian3{background: #68A201;}
        .ywz_zhuce_hongxianwenzi{float: left;width: 72px;margin-left: 5px;text-align: center;color: #b0adad;font-size: 12px;}
        #levelText_1{margin-left: 0px;}
        .ywz_zhuce_yongyu1{float: left;color: #c00;font-size: 12px;padding-left: 10px;margin-top: 10px;_padding-left:0px;}    </style>
</head>
<body>
<form id="myForm" method="post" class="definewidth m20">
<input type="hidden" name="id" value="{$user.id}" />
    <table class="table table-bordered table-hover definewidth m10">
        <tr>
            <input type="hidden" name="u_id" id="u_id"/>
            <td width="10%" class="tableleft">登录名</td>
            <td><input id="u_loginName" type="text" name="u_loginName"/><span id="loginNameRes" style="color: red;margin-left: 10px"></span><input id="initLoginName" type="hidden" name="initLoginName"/></td>
        </tr>
        <tr>
            <td class="tableleft">密码</td>
            <td>
                <div class="ywz_zhucexiaobo">
                    <div class="ywz_zhuce_xiaoxiaobao">
                        <div class="ywz_zhuce_kuangzi">
                            <input name="u_passWord" type="password" id="u_passWord"  />
                        </div>
                        <div class="ywz_zhuce_huixian" id="pwdLevel_1"></div>
                        <div class="ywz_zhuce_huixian" id="pwdLevel_2"></div>
                        <div class="ywz_zhuce_huixian" id="pwdLevel_3"></div>
                        <div class="ywz_zhuce_hongxianwenzi" id="levelText_1">弱</div>
                        <div class="ywz_zhuce_hongxianwenzi" id="levelText_2">中</div>
                        <div class="ywz_zhuce_hongxianwenzi" id="levelText_3">强</div>
                    </div>
                    <div class="ywz_zhuce_yongyu1">
                        <span id="pwd_tip" style="color: #898989;">
                            <font style="color: #f00;">*</font>
                            6-16位，由字母(区分大小写)、数字、符号组成
                        </span>
                        <span id="pwd_err" style="color: #f00;display: none;">
                            6-16位，由字母(区分大小写)、数字、符号组成
                        </span>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="tableleft">真实姓名</td>
            <td><input type="text" name="u_trueName" id="u_trueName" value="admin"/><span id="uNameRes" style="color: red;margin-left: 10px"></span></td>
        </tr>
        <tr>
            <td class="tableleft">邮箱</td>
            <td><input type="text" name="u_email" id="u_email" /><span id="emailRes" style="color: red;margin-left: 10px"></span></td>
        </tr>
        <tr>
            <td class="tableleft">状态</td>
            <td>
                <input type="radio" name="u_state" value="0"/> 启用
              <input type="radio" name="u_state" value="1"/> 禁用
            </td>
        </tr>
        <tr>
            <td class="tableleft">角色</td>
            <td>
            	<select name="r_id" id="r_id">
       			 </select>
        	</td>
        </tr>
        <tr>
            <td class="tableleft"></td>
            <td>
                <button id="update" class="btn btn-primary" type="button">更新</buttonid>&nbsp;&nbsp;<button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
<script>
    String.prototype.GetValue= function(para) {
        let reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
        let r = this.substr(this.indexOf("\?")+1).match(reg);
        if (r!=null) return unescape(r[2]); return null;
    }
    $(function () {
        $("#u_passWord").focus(function(){     //光标定位在密码框上绑定的事件
            $("#u_passWord").keyup();    //调用keyup()事件
        });
        $("#u_passWord").keyup(function(){      //为密码框绑定keyup事件
            var _th=$(this);
            if(!_th.val()){             //判断非空
                console.log(_th.val());
                $("#pwd_tip").hide();     //默认提示语隐藏
                $("#pwd_err").show();     //错误信息显示
                Primary();      //调用Primary(),改变密码强度条显示的样式
                return;
            }
            if(_th.val().length<6){     //判断密码长度是否<6
                $("#pwd_tip").hide();   //默认提示语隐藏
                $("#pwd_err").show();   //错误信息显示
                Weak();  //调用Weak(),改变密码强度条显示的样式
                return;
            }
            var _r=checkPassword(_th);    //调用checkPassword(_th),验证密码格式，返回整数值(true和false相加后的值)，赋值给变量_r
            if(_r<1){
                $("#pwd_tip").hide();
                $("#pwd_err").show();
                Primary();   //调用Primary(),改变密码强度条显示的样式
                return;
            }
            if(_r>0&&_r<2){
                Weak();    //调用Weak(),改变 密码强度条显示的样式
            }else if(_r>=2&&_r<4){
                Medium();  //调用Medium(),改变密码强度条显示的样式
            }else if(_r>=4){
                Tough();   //调用Tough(),改变密码强度条显示的样式
            }
            $('#pwd_tip').hide();
            $('#pwd_err').hide();
        });
        // 获得所有角色 并且渲染到页面
        $.getJSON("/role/getAll",null,function (data) {
            let initItem = `<option value="0">--请选择--</option>`
            $("#r_id").append($(initItem))
            if (data.code == 200) {
                let list = data.data;
                for (let i = 0; i < list.length; i++) {
                    let items = `<option value="`+list[i].r_id+`">`+list[i].r_name+`</option>`;
                    $("#r_id").append($(items))
                }
            } else {
                alert("网络出现问题，请重试")
            }
        })
        // 渲染该用户的信息
        loadUpdateData()
        // loginName 的blur事件
        $("#u_loginName").blur(function () {
            isOnlyName()
        })
        // email 的blur事件
        $("#u_email").blur(function () {
            isCorrectOfEmail()
        })
        // update更新事件
        $("#update").click(function () {
            // 表单的验证
            let val = $("#u_loginName").val();
            if (val=='') {
                alert("请填写角色名称");
            } else {
                $.getJSON("/user/isExistName/" +val ,null,function (data) {
                    if (data.result=="success" && data.data.u_loginName != $("#initLoginName").val()){
                        $("#loginNameRes").html(data.msg);
                    } else{
                        $("#loginNameRes").html("");
                        // 登录名的唯一性验证成功
                        if (!isNullOfPassWord() && !isNullOfRealName() && isCorrectOfEmail() && roleTest()){
                            // 验证成功
                            // 发送ajax
                            console.log($("#myForm").serialize())
                            $.post("/user",$("#myForm").serialize()+"&_method=PUT",function (data) {
                                if (data.code == 200) {
                                    // 服务器接收到了请求
                                    if(data.msg=='success') {
                                        let pageIndex = location.href.GetValue("pageIndex");
                                        let pageSize = location.href.GetValue("pageSize");
                                        alert("更新成功")
                                        window.location.href = "index.html?pageIndex="+pageIndex+"&pageSize="+pageSize;
                                    }else{
                                        alert("更新失败！"+data.result);
                                    }
                                } else {
                                    alert("服务器出错！请稍后重试");
                                }
                            })
                        }
                    }
                })
            }
        })

		$('#backid').click(function(){
				window.location.href="index.html";
		 });
    });
    // 验证登录名的唯一性
    function isOnlyName() {
        let val = $("#u_loginName").val();
        if (val=='') {
            alert("请填写用户登录名");
        } else {
            $.getJSON("/user/isExistName/" +val ,null,function (data) {
                if (data.result=="success" && data.data.u_loginName != $("#initLoginName").val()){
                    $("#loginNameRes").html(data.msg);
                } else{
                    $("#loginNameRes").html("");
                }
            })
        }
    }
    // 密码的非空验证
    function isNullOfPassWord() {
        if ($("#u_passWord").val() == '') {
            alert("请输入密码")
            return true;
        }
        return  false;
    }
    // 真实姓名的非空
    function isNullOfRealName() {
        if ($("#u_trueName").val()=='') {
            alert("请填写真实姓名");
            return true;
        }
        return  false;
    }
    // 邮箱正确性的验证
    function isCorrectOfEmail() {
        let val = $("#u_email").val();
        if (val == '') {
            alert("请填写邮箱")
            return false;
        }
        var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
        if(!myreg.test(val)){
            // 显示
            $("#emailRes").html("请输入正确的邮箱")
            return false;
        } else {
            $("#emailRes").html("")
            return true;
        }
    }
    // 角色选择的验证
    function roleTest() {
        if ($("#r_id").val()==0){
            // 没有选择角色
            alert("请选择角色类型!")
            return false;
        }
        return true;
    }
    // 渲染查询的数据
    function loadUpdateData() {
        // 获取url 的 id
        let id = location.href.toString().GetValue("id");
        console.log(id);
        $.getJSON("/user/"+id,null,function (data) {
            if (data.code==200){
                // 服务器响应成功
                if (data.msg=="success"){
                    let user = data.data;
                    console.log(user)
                    $("#u_id").val(user.u_id);
                    $("#u_loginName").val(user.u_loginName);
                    $("#initLoginName").val(user.u_loginName);
                    $("#u_passWord").val(user.u_passWord);
                    $("#u_trueName").val(user.u_trueName);
                    $("#u_email").val(user.u_email);
                    $("#r_id").val(user.r_id);
                    // 渲染单选框
                    let radio = $("input[name='u_state']");
                    for (let i = 0; i < radio.length; i++) {
                        if ($(radio[i]).val()==user.u_state) {
                            $(radio[i]).prop("checked",true);
                        }
                    }
                    // 渲染角色名
                    $("#r_id").val(user.r_id);
                } else {
                    alert("网络问题，请稍后重试");
                    location.href = "index.html";
                }
            } else{
                alert("网络问题，请稍后重试");
                location.href = "index.html";
            }
        })
    }
    //"弱、中、强"对应的条为灰色
    function Primary(){
        $("#pwdLevel_1").attr("class","ywz_zhuce_huixian");
        $("#pwdLevel_2").attr("class","ywz_zhuce_huixian");
        $("#pwdLevel_3").attr("class","ywz_zhuce_huixian");
    }
    //"弱"对应的条高亮
    function Weak(){
        $("#pwdLevel_1").addClass("ywz_zhuce_hongxian");
        $("#pwdLevel_2").attr("class","ywz_zhuce_huixian");
        $("#pwdLevel_3").attr("class","ywz_zhuce_huixian");
    }
    //"弱、中"对应的条高亮
    function Medium(){
        $("#pwdLevel_1").addClass("ywz_zhuce_hongxian");
        $("#pwdLevel_2").addClass("ywz_zhuce_hongxian2");
        $("#pwdLevel_3").attr("class","ywz_zhuce_huixian");
    }
    //"弱、中、强"对应的条高亮
    function Tough(){
        $("#pwdLevel_1").addClass("ywz_zhuce_hongxian");
        $("#pwdLevel_2").addClass("ywz_zhuce_hongxian2");
        $("#pwdLevel_3").addClass("ywz_zhuce_hongxian3");
    }
    //验证密码格式
    function checkPassword(pwdinput){
        var maths,smalls,bigs,corps,cat,num;
        var str=$(pwdinput).val();   //输入框密码值
        var len=str.length;         //密码长度
        var cat=/.{16}/g;            //匹配16个字符，除了换行和行结束符
        if(len==0){                  //如果密码长度为0，返回1
            return 1;
        }
        if(len>16){   //如果密码长度超过16位，则密码框内只显示前16位
            $(pwdinput).val(str.match(cat)[0]);
            console.log(str.match(cat)[0]);
        }
        cat=/.*[\u4e00-\u9fa5]+.*$/;   //匹配是否含有汉字
        if(cat.test(str)){      //如果含有汉字，返回-1
            return -1;
        }
        cat=/[0-9]/;    //匹配是否含有数字
        maths=cat.test(str);
        cat=/[a-z]/;  //匹配是否含有小写字母
        smalls=cat.test(str);
        cat=/[A-Z]/;   //匹配是否含有大写字母
        bigs=cat.test(str);
        corps=corpses(pwdinput);    //调用corpses(pwdinput)方法，验证密码框内的值是否同时含有数字、大小写字母
        num = maths + smalls + bigs + corps;    //maths、smalls、bigs、corps为true或false,true表示1,false表示0
        if(len<6){    //如果密码长度<6,返回1
            return 1;
        }
        if(len>=6&&len<=8){   //如果密码长度>=6&&<=8
            if(num==1 || num==2) return 1;   //如果值中包含数字、小写字母、大写字母、特殊符号中的1种或2种,则返回1
            if(num==3 || num==4) return 2; //如果值中包含数字、小写字母、大写字母、特殊符号中的3种或4种,则返回2
        }
        if(len>8){
            if(num==1) return 1;
            if(num==2 || num==3) return 2;
            if(num==4) return 4;
        }
    }
    function corpses(pwdinput){     //该方法匹配字符串中是否包含特殊字符(即除去大小写字母和数字)
        var cat=/./g;   //匹配单个字符，除了换行和行结束符
        var str=$(pwdinput).val();   //获取密码框内的值
        var sz=str.match(cat);    //匹配单个字符，除了换行和行结束符,返回结果为数组sz
        for(var i=0;i<sz.length;i++){    //循环匹配数组中的每个字符，进行验证
            cat=/[0-9]/;    //匹配是否含有数字
            var maths_01=cat.test(sz[i]);
            cat=/[a-z]/;  //匹配是否含有小写字母
            var smalls_01=cat.test(sz[i]);
            cat=/[A-Z]/;   //匹配是否含有大写字母
            var bigs_01=cat.test(sz[i]);
            if(!maths_01&&!smalls_01&&!bigs_01){   //如果匹配的字符串包含特殊字符，则返回true，否则返回false
                return true;
            }
        }
        return false;
    }
</script>